<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .ball{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="购物车" @click="flag=!flag">
        <!-- 动画生命函数 @before-enter：动画开始之前  @enter: 动画开始   @after-enter:动画结束 -->
        <transition
        @before-enter="beforeEnter" 
        @enter="enter" 
        @after-enter="afterEnter">

            <div class="ball" v-show="flag"></div>

        </transition>
    </div>
    <script>
     var vm  = new Vue({
         el : "#app",
         data : {
             flag:false
         },
         methods:{
             beforeEnter(el){
                // 设置小球初始位置
                el.style.transform = "translate(0,0)";

             },
             enter(el,done){
                // 这句话没有实际的作用  但是 如果不写 则没有动画效果 
                // 类似于动画刷新效果
                el.offsetWidth;
                // 结束位置设置
                el.style.transform = "translate(150px,450px)";
                el.style.transition = "all 1s ease";

                // 这里的done 其实就是afterEnter   不调用小球的消失会有延迟
                done();
             },
             afterEnter(el){
                 //动画完成之后
                 this.flag = false;
             }
         }
     }) 
        
    </script>
</body>
</html>